<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ok</title>
</head>
<script src="js/jquery-2.1.0.min.js"></script>
<body>
<h1>Hello World!</h1>
<button id="btn" type="submit">退出登录</button>

<!-- 上传表单 -->
<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="file" />
    <button type="submit">上传图片</button>
</form>

<!-- 显示上传的图片 -->
<div id="imagePreview" style="margin-top: 20px;">
    <h3>上传后的图片：</h3>
    <img id="uploadedImage" src="" alt="上传的图片" style="max-width: 500px; max-height: 300px;"/>
</div>

</body>
<script>
    // 上传图片表单提交
    $('#uploadForm').on('submit', function (e) {
        e.preventDefault();  // 防止表单的默认提交行为

        var formData = new FormData();
        var fileInput = $('#fileInput')[0].files[0];
        formData.append('file', fileInput);

        // 使用AJAX提交表单
        $.ajax({
            url: '/upload/image',  // 后端图片上传接口
            type: 'POST',
            data: formData,
            processData: false,  // 不处理data
            contentType: false,  // 不设置content-type
            success: function (response) {
                // 上传成功后，回显上传的图片
                $('#uploadedImage').attr('src', response);  // 使用返回的图片URL
            },
            error: function () {
                alert('上传失败，请重试');
            }
        });
    });
    $('#btn').click(function () {
        $.ajax({
            url: '/logout',
            method: 'post',
            success: function (ret) {
                console.log(ret);
                alert(ret.message);
                window.location.href = '/login.html'
            }
        })
    })

</script>
</html>